<template>
    <div class="tt-onion-head">
        <div class="tt-head-box">
            <!-- logo -->
             <div class="logo">
            
             </div>
             <!-- 搜索 -->
             <div class="search">
                 <div class="icon">
                     <span class="bi bi-search"></span>
                 </div>
                 <input type="text" placeholder="小葱ONION"
                 @click="jumpTo">
                 <div class="tt-find">
                     <span>搜索</span>
                 </div>
             </div>
             <!-- 分享 -->
             <div class="share">
                <span class="bi bi-box-arrow-up-right"></span>
             </div>
        </div>
    </div>
</template>

<script>
export default {
    methods:{
        jumpTo(){
            this.$router.push({path:"/search"});
        }
    }
}
</script>

<style lang="less">
@import '../../assets/css/reset.css';
@import '../../assets/less/variable.less';

.tt-onion-head{
    width: 100%;
    height: 50px;
    background: #fff;
    padding-bottom: 10px;
    .tt-head-box{
        height: 50px;
        display: flex;
        padding-right: 15px;
        .logo{
            width: 60px;
            height: 50px;
            background-image: url(../../assets/img/logo.png);
            background-size: cover;
            background-position-x: -15px;
            background-repeat: no-repeat;
        }
        .search{
            flex-grow: 1;
            height: 50px;
            position: relative;
            overflow: hidden;
            .icon{
                position: absolute;
                width: 20px;
                height: 20px;
                font-size: 16px;
                z-index: 1001;
                margin-left: (20px /2);
                margin-top: (40px /2);
                padding-right: 5px;
                border-right: 1px solid #ccc;
            }
            .tt-find{
                width: 60px;
                height: 29px;
                line-height: 28px;
                font-size: 12px;
                border-radius: 30px;
                color: #fff;
                text-align: center;
                background-color: #ad00e6;
                position: absolute;
                margin-left: 73%;
                margin-top: 13px;
            }
            input{
                position: absolute;
                width: 80%;
                height: 30px;
                display: block;
                margin-top: 10px;
                margin-bottom: 10px;
                border-radius: 30px;
                outline: none;
                border: 1px solid #cf3bed;
                padding-left: 40px;
                font-size: 14px;
            }
          
        }
        .share{
            height: 50px;
            font-size: 20px;
            margin-top: 15px;
            padding-left: 5px;
        }
    }
}
</style>